<template>
	<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
	<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
	<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList" @scrolltolower="banchBottom">
			<template #top>
				<z-tabs :list="tabList" @change="tabChange" :current="currentTab" :deviceInfor="deviceInfor" />
			</template>
			
			<view class="order_item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
				<view class="item_title">
					<view>订单编号</view>
					<view>{{ item.orderNo }}</view>
					<view @click.stop="toDetails(item)">进度详情></view>
				</view>
				<view class="item_operation">
					<view class="item_img">
						<image :src="item.pictureList"></image>
					</view>
					<view class="item_content">
						<view class="item_info">
							<view class="time">
								<view>报修时间：</view>
								<view>{{ item.orderTime }}</view>
							</view>
							<view class="name">
								<view>设备名称：</view>
								<view>{{ item.equipment }}</view>
							</view>
							<view class="describe">
								<view>问题描述：</view>
								<view>{{ item.description }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="appress" v-if="currentTab==1">
					<span @click.stop="toAppraise(item)">去评价</span>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		debounce,
		throttle,
		dateTimeFormat
	} from '@/utils/utils.js'
	export default {
		name: 'release',
		data() {
			return {
				dataList: [],
				tabList: ['已报修', '维修完成', '已评价'],
				userId: '',
				currentTab: 0, //tab切换
				deviceInfor: true
			};
		},
		onLoad(op) {
			if (op.index) {
				this.currentTab = op.index * 1;
			}
			this.userId = getApp().globalData.userId;
			uni.getSystemInfo({
				success: (res) => {
					this.clientHeight = res.windowHeight - 100
				}
			});
			this.deviceInfor = getApp().globalData.deviceInfor
		},
		methods: {
			banchBottom: debounce(function() {
				this.queryList()
			}, 200),
			tabChange(index) {
				this.currentTab = index;
				this.queryList();
			},
			queryList() {
				let data = [
					{id:1,orderNo:'1111',pictureList:[''],orderTime:'2025-08-10',equipment:'ceshizhewna',description:'测试者玩'}
				]
				this.$refs.paging.complete(data);
				/* const params = {
					type: this.currentTab + 4
				};
				this.$newapi.getOrderList(params).then((res) => {
					if (res.code == 200) {
						res.data.forEach(item => {
							item.orderTime = dateTimeFormat(item.orderDate)
							item.pictureList = item.pictureUrl.split(',')
						})
						this.$refs.paging.complete(res.data);
					} else {
						this.$refs.paging.complete(false);
					}
				}); */
			},
			//跳转订单详情
			toDetails(i) {
				uni.navigateTo({
					url: `/pagesIndex/histor/histor?item=${JSON.stringify(i)}`
				});
			},
			//详情
			toDetail(item){
				uni.navigateTo({
					url: `/pagesIndex/detail/detail?item=${JSON.stringify(item)}`
				});
			},
			//评价
			toAppraise(item){
				uni.navigateTo({
					url:`/pagesIndex/evaluate/evaluate?item=${JSON.stringify(item)}`
				})
			}
		},
		onShow() {
			//获取订单数据

		},
	};
</script>

<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
		background: #f3f7fd;
	}

	// 去掉页面滚动条
	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-input {
		width: 90vw !important;
		margin: 0 auto;
		background: #fff;
		border: 1px solid #318bf5 !important;
	}

	::v-deep .u-input--radius {
		border-radius: 30px !important;
	}

	/*选项卡内容部分*/
	.order_item {
		width: 94%;
		border-radius: 20rpx;
		margin: 0 auto;
		background-color: #fff;
		margin-top: 20rpx;
		border-top: 2px solid rgb(244, 244, 244);
		border-bottom: 2px solid rgb(244, 244, 244);
		padding-bottom: 20rpx;
		.appress{
			display: flex;
			justify-content: flex-end;
			padding-right: 40rpx;
			span{
				background: #318bf5;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				color: #fff;
				font-size: 24rpx;
			}
		}
	}

	.item_title {
		width: 90%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
	}

	.item_title view:nth-child(1) {
		font-size: 32rpx;
		color: #111;
		text-align: center;
		font-weight: 600;
		
	}

	.item_title view:nth-child(2) {
		margin-left: 30rpx;
		font-size: 26rpx;
		color: #2d2d2d;
		text-align: left;
	}

	.item_title view:nth-child(3) {
		width: 30%;
		font-size: 24rpx;
		color: #318bf5;
		text-align: right;
	}

	.item_operation {
		width: 90%;
		// height: 245rpx;
		display: flex;
		flex-direction: row;
		margin-left: auto;
		margin-right: auto;
	}

	.item_img {
		width: 32%;
		height: 100%;
	}

	.item_img image {
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
	}

	.item_content {
		width: 75%;
		height: 100%;
	}

	.item_info {
		width: 100%;
		// height: 69%;
	}

	.time,
	.name,
	.describe {
		width: 100%;
		height: 23%;
		display: flex;
		flex-direction: row;
		margin-bottom: 10rpx;
	}

	.time view,
	.name view,
	.describe view {
		height: 100%;
		line-height: 40rpx;
		text-align: left;
		// font-size: 26rpx;
	}

	.time view:nth-child(1),
	.name view:nth-child(1),
	.describe view:nth-child(1) {
		// width: 30%;
		color: black;
		margin-left: 20rpx;
		font-weight: 550;
		font-size: 28rpx;
	}

	.time view:nth-child(2),
	.name view:nth-child(2),
	.describe view:nth-child(2) {
		width: 65%;
		color: #959595;
		font-size: 26rpx;
	}

	@media (min-width: 768px) {
		.content {
			padding-top: 20px;
		}

		::v-deep .u-input {
			padding-top: 16rpx !important;
			padding-bottom: 16rpx !important;
		}

		::v-deep .u-input__content__field-wrapper__field {
			font-size: 18rpx !important;
		}
	}

	@media (max-width: 767px) {
		
	}
</style>